<template>
  <a-config-provider :locale="zhCN" :theme="{}">
    <a-app>
      <a-cascader
        class="router-utils"
        :field-names="{ label: 'name', value: 'name', children: 'children' }"
        :options="$router.options.routes"
        placeholder="切换路由"
        change-on-select
        @change="changeRoute"
      />
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component
            :is="Component"
            :key="$route.matched[0]?.name || $route.matched[0]?.path || $route.name || $route.path"
            v-if="$route.meta?.keepAlive"
          />
        </keep-alive>
        <component
          :is="Component"
          :key="$route.matched[0]?.name || $route.matched[0]?.path || $route.name || $route.path"
          v-if="!$route.meta?.keepAlive"
        />
      </router-view>
    </a-app>
  </a-config-provider>
</template>

<script setup>
import zhCN from 'ant-design-vue/es/locale/zh_CN'

const $route = useRoute()
const $router = useRouter()

function changeRoute(value, item) {
  $router.push({ name: item.at(-1).name })
}
</script>

<style scoped>
.router-utils {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}
</style>
